<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Casual Library Demo - Field Runner</title>

<style>
body
{
	padding: 0;
	margin: 0;
	background-color: #000000;
}

#main
{
	margin-left: auto;
	margin-right: auto;
	width: 1200px;
}

#textContainer
{
	font-family: sans-serif, verdana;
	font-size: 12px;
	color: #FFFFFF;
	position: absolute;
	top: 0;
	left: 0;	
}

</style>

<!--
<script type="text/javascript" src="casual/core/base.js"></script>
<script type="text/javascript" src="casual/geom/Matrix.js"></script>
<script type="text/javascript" src="casual/utils/NameUtil.js"></script>
<script type="text/javascript" src="casual/utils/Astar.js"></script>
<script type="text/javascript" src="casual/event/EventBase.js"></script>
<script type="text/javascript" src="casual/event/StageEvent.js"></script>
<script type="text/javascript" src="casual/event/EventManager.js"></script>
<script type="text/javascript" src="casual/event/EventDispatcher.js"></script>
<script type="text/javascript" src="casual/display/DisplayObject.js"></script>
<script type="text/javascript" src="casual/display/DisplayObjectContainer.js"></script>
<script type="text/javascript" src="casual/display/Shape.js"></script>
<script type="text/javascript" src="casual/display/Bitmap.js"></script>
<script type="text/javascript" src="casual/display/Stage.js"></script>
<script type="text/javascript" src="casual/display/Sprite.js"></script>
<script type="text/javascript" src="casual/display/MovieClip.js"></script>
<script type="text/javascript" src="casual/casual.js"></script>
<script type="text/javascript" src="demo/ImageManager.js"></script>
<script type="text/javascript" src="demo/Gatling.js"></script>
<script type="text/javascript" src="demo/Soldier.js"></script>
<script type="text/javascript" src="demo/ScoreBar.js"></script>
<script type="text/javascript" src="demo/Player.js"></script>
<script type="text/javascript" src="demo/WeaponFactory.js"></script>
<script type="text/javascript" src="demo/WeaponTool.js"></script>
<script type="text/javascript" src="demo/EnemyFactory.js"></script>
<script type="text/javascript" src="demo/Runner.js"></script>
-->

<script type="text/javascript" src="casual.js"></script>
<script type="text/javascript" src="runner.js"></script>

<script type="text/javascript">
function startGame()
{
	if (!document.createElement('canvas').getContext)
	{
		alert("Sorry, you browser doesn't support canvas, please use Firefox3.6+, Safari5+, Chrome, etc. Do not use IE.");
		return;
	} 
	
	//align center
	var left = (document.body.screenWidth - document.getElementById("canvas").width) >> 1;
	var top = (document.body.clientHeight - document.getElementById("canvas").height) >> 1;
	document.body.style.marginLeft = left;
	document.body.style.marginTop = top;
	
	//start game
	Runner.startup();
}
</script>

</head>

<body onload="startGame();">	
	<div id="main" style="background-color:#666666">
		<div id="canvasContainer">
			<canvas id="canvas" width="1200" height="580">Sorry, you browser doesn't support canvas, please use Firefox3.6+, Safari5+, Chrome, etc. Do not use IE.</canvas>
		</div>  
		<div id="textContainer">
			<span id="status"></span>
		</div>
	</div>	
</body>

</html>
